<template>
  <div id="cake">
    <div class="container">
      <div class="cake">
        <!-- 第一层 -->
        <div class="tier tier-1">
          <div class="filling"></div>
          <div class="icing-group">
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
            <div class="icing"></div>
        </div>
      </div>
      <!-- 第二层 -->
      <div class="tier tier-2">
        <div class="filling"></div>
        <div class="icing-group">
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
        </div>
      </div>
      <!-- 最高层 -->
      <div class="tier tier-3">
        <div class="filling"></div>
        <div class="icing-group">
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
          <div class="icing"></div>
        </div>
      </div>
      <div class="candles">
        <div class="candle">
          <div class="flame">
            <div v-if="showFlame" class="flame-in"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="text">
    <router-view></router-view>
  </div>
</div>
</template>

<script>
require('../assets/js/script')
export default {
  data () {
    return {
      showFlame: true,
      autoplay: false
    }
  },
  mounted () {
    setTimeout(() => {
      this.$router.push('/cake/text')
    }, 3000)
    this.$eventBus.$on('flameEvent', target => {
      this.showFlame = target
    })
  },
  destroyed () {
    this.$eventBus.$off('flameEvent')
  }
}
</script>

<style scoped>
@import '../assets/css/style.css';

.cake {
  position: relative;
  width: 100%;
  height: 100%;
}
.container {
  position: relative;
  margin: 5% auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 950px;
  height: 300px;
}
.cake {
  height: 100%;
  border-radius: 5%;
  background-color: rgba(255, 255, 255, 0.39);
  opacity: 0;
  transition: all 12s;
  animation: showcake 10s linear 2s 1 forwards;
}
@keyframes showcake {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.candles .candle .flame {
  width: 18px;
  height: 18px;
  bottom: 40px;
  left: -4px;
}
/* 蜡烛位置 */
.candles .candle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 35px;
  background-color: #f2abe7;
}
.candles .candle .flame {
  width: 16px;
  height: 16px;
  left: -3.5px;
}
.candles .candle .flame .flame-in {
  width: 100%;
  height: 100%;
  background-color: #fec31e;
  border-radius: 0 50% 50%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-animation: flame 2s linear infinite;
          animation: flame 2s linear infinite;
}
@keyframes flame {
  50% {
    -webkit-transform: scale(.7) rotate(45deg);
            transform: scale(.7) rotate(45deg);
  }
}
@keyframes showflame {
  0% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.text {
  position: relative;
  margin-left: 8%;
  margin-top: -50px;
  width: 90%;
  height: 250px;
}
</style>
